<template>
	<div class='wy-main car-info'>
		<a-row class="wy-main-title" v-if='!type'>
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">新增车辆</span>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<a-form :form="form" @submit="handleSubmit" class="wy-form">
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="车牌号">
				<a-input :disabled="disabled"  v-decorator="[ 'licence', {rules: [{ required: true, message: '请输入车牌号!' }]}]" placeholder='请输入车牌号' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="车辆类型">
				<a-select :disabled="disabled"  v-decorator="[ 'type', {rules: [{ required: true, message: '请选择车辆类型!' }]} ]" placeholder="请选择车辆类型">
					<a-select-option v-for="(item,index) in carTypeList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }" label="车长">
				<a-input-number :min="0.01" :precision='2' :disabled="disabled" style="width: 280px;" v-decorator="[ 'length', {rules: [{ required: true, message: '请输入车长!' }]}]" placeholder='请输入车长' />
				<b style="margin-left: 20px;">（米）</b>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }" label="载重">
				<a-input-number :min="0.01" :precision='2' :disabled="disabled" style="width: 280px;" v-decorator="[ 'weight', {rules: [{ required: true, message: '请输入载重!' }]}]" placeholder='请输入载重' />
				<b style="margin-left: 20px;">（吨）</b>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }" label="体积">
				<a-input-number :min="0.01" :precision='2'  :disabled="disabled" style="width: 280px;" v-decorator="[ 'volume']" placeholder='请输入体积' />
				<b style="margin-left: 10px;">（立方米）</b>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="车辆常驻地">
				<a-input :disabled="disabled"  @click="departureShowMap"  v-decorator="[ 'residence', {rules: [{ required: true, message: '请选择车辆常住地!' }]}]" placeholder='请选择车辆常住地' />
			</a-form-item>

			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="驾驶员认证图片" class="upzjimg" v-if="type == 'info'">
				<div class="up_img">
					<img  v-if="vehicle_img" :src="vehicle_img" alt="avatar" />
				</div>
				<div class="up_img">
					<img  v-if="travel_img" :src="travel_img" alt="avatar" />
				</div>
				<div class="up_img">
					<img  v-if="Operate_img" :src="Operate_img" alt="avatar" />
				</div>
			</a-form-item>
			<!--label="车辆认证"-->
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }"  class="upzjimg" v-if="type != 'info'">
				<template slot="label">
			       <span style="color: red;font-family: SimSun;">* </span>车辆认证
			    </template>
				<a-form-item class="up_img">
					<a-upload v-decorator="[ 'upload1', {rules: [{ required: true, message: '请选择车辆照片 !' }]}]" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="vehicle_Change">
						<div class="img_zz" v-if="vehicle_img">
							<div class="img_zz_text" >
								<a-icon style="font-size: 30px;" :type="upload1_loading ? 'loading' : 'plus'" />
								<div class="ant-upload-text" style="margin-top: 10px;">
									<span style="color: red;"></span>
								</div>
							</div>
							<div class="img_zz_d"></div>
						</div>
						<img  v-if="vehicle_img" :src="vehicle_img" alt="avatar" />
						<div class="up_img_d" v-if="!vehicle_img">
							<a-icon style="font-size: 30px;" :type="upload1_loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								<span style="color: red;">*必填：</span>车辆照片
							</div>
						</div>
					</a-upload>
				</a-form-item>
				<a-form-item class="up_img">
					<a-upload v-decorator="[ 'upload2', {rules: [{ required: true, message: '请选择行驶证照片 !' }]}]" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="travel_Change">
						<div class="img_zz" v-if="travel_img">
							<div class="img_zz_text" >
								<a-icon style="font-size: 30px;" :type="upload2_loading ? 'loading' : 'plus'" />
								<div class="ant-upload-text" style="margin-top: 10px;">
									<span style="color: red;"></span>
								</div>
							</div>
							<div class="img_zz_d"></div>
						</div>
						<img  v-if="travel_img" :src="travel_img" alt="avatar" />
						<div class="up_img_d" v-if="!travel_img">
							<a-icon style="font-size: 30px;" :type="upload2_loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								<span style="color: red;">*必填：</span>行驶证照片 
							</div>
						</div>
					</a-upload>
				</a-form-item>
				<a-form-item class="up_img">
					<a-upload v-decorator="[ 'upload3', {rules: [{ required: true, message: '请选择营运证照片 !' }]}]" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Operate_Change">
					<div class="img_zz" v-if="Operate_img">
						<div class="img_zz_text" >
							<a-icon style="font-size: 30px;" :type="upload3_loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 道路运输证（营运证）  
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img  v-if="Operate_img" :src="Operate_img" alt="avatar" />
					<div class="up_img_d" v-if="!Operate_img">
						<a-icon style="font-size: 30px;" :type="upload3_loading ? 'loading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							<span style="color: red;">*必填：</span>道路运输证（营运证）
						</div>
					</div>
				</a-upload>
				</a-form-item>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="车辆简介">
				<a-textarea :disabled="disabled" style="width: 70%;" v-decorator="[ 'vehicleRemarks', {rules: [{ required: true,message: '请输入车辆简介!' }]}]" placeholder='0-2000字' maxLength="2000" :rows="6" />
			</a-form-item>
			<a-row style="margin-top: 10px;">
				<a-col :span="24">
					<p style="margin: 0;">
						<a-divider style="width: 95%;margin-left: 20px;" />
					</p>
				</a-col>
			</a-row>
			<div class="ant-row ant-form-item" v-if="type != 'info'">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<!--<a-checkbox v-model="agreement" >
								我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
							</a-checkbox>-->
							<a-form-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" label="协议" class="wy-agreement"  >
								<a-checkbox v-decorator="['agreement',{ rules: [ {required: true,pattern: /true/, message: '请阅读并接受',}]}]">
									我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
								</a-checkbox>
							</a-form-item>
						</span>
					</div>
				</div>
			</div>
			<div class="ant-row ant-form-item" v-if="type != 'info'">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-button type="primary" html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
								保存
							</a-button>
						</span>
					</div>
				</div>
			</div>
				<!--地图Svg显示位置-->
		<map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
		<a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<web @close="close" v-if="webShow" @cancel="close"></web>
		</a-modal>
		<a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<user @close="close" v-if="userShow" @cancel="close"></user>
		</a-modal>
		</a-form>
		
	</div>

</template>
<script>
    import MapSvg from '@/components/dialog/MapSvg'
	import { mapState } from 'vuex'
	import { environment } from './../../../environments/environment'
	import Web from '@/components/tool/web'
	import User from '@/components/tool/user'
	export default {
		components: {
			MapSvg,
			Web,
			User
		},
		props:['datail','type','isSee'],
		data() {
			return {
				webShow:false,
				userShow:false,
				// 地图存起止数据
				departureData: {},
				destinationData: {},
				disabled:false,
				agreement:false,
				form: this.$form.createForm(this),
				uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
				FileUploadUrl2:environment.FileUploadUrl2,
				vehicle_img:'', // 车辆照片
				travel_img:'',  // 行驶证照片
				Operate_img:'', // 运营证照片
				
				certificatesPics :'',// 运营证
				certificatesPicsPath :'',// 运营证目录
				drivingLicense :'',// 行驶证
				drivingLicensePath :'',//  行驶证目录
				vehiclePics :'',// 车辆
				vehiclePicsPath :'',// 车辆照片目录
				upload1_loading: false,
				upload2_loading: false,
				upload3_loading: false,
				but_loading:false,
				imageUrl: '',
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 10
						},
					},
				},
				// 车辆类型
				carTypeList: []
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {
			console.log(this.datail,'datail')
			if(this.isSee){
				this.disabled = true;
			}else{
				this.disabled = false;
			}
			if(this.datail){
				let datail = this.datail
				setTimeout(()=>{
					this.form.setFieldsValue({
						licence:datail.licence,
						residence:datail.residence,
						length:datail.length,
						volume:datail.volume,
						weight:datail.weight,
						type: parseInt(datail.type) || '',
						vehicleRemarks: datail.vehicleRemarks,
						// driverId:datail.driverId,
						// mobile:datail.mobile,
					});
		        },100)
				if(datail.vehiclePicsPath){
					this.vehicle_img =this.FileUploadUrl2+datail.vehiclePicsPath+datail.vehiclePics // 车辆照片
					if(this.type != 'info')
					setTimeout(() => {
						this.form.setFieldsValue({
							upload1:true
						});
					}, 100);

				}else{
					this.vehicle_img = null;
				}
				if(datail.drivingLicensePath){
					this.travel_img = this.FileUploadUrl2+datail.drivingLicensePath+datail.drivingLicense  // 行驶证照片
					if(this.type != 'info')
					setTimeout(() => {
						this.form.setFieldsValue({
							upload2:true
						});
					}, 100);
				}else{
					this.travel_img = null;
				}
				if(datail.certificatesPicsPath){
					this.Operate_img = this.FileUploadUrl2+datail.certificatesPicsPath+datail.certificatesPics // 运营证照片
					if(this.type != 'info')
					setTimeout(() => {
						this.form.setFieldsValue({
							upload3:true
						});
					}, 100);
				}else{
					this.Operate_img = null;
				}
				
				
				
				this.certificatesPics = datail.certificatesPics// 运营证
				this.certificatesPicsPath = datail.certificatesPicsPath// 运营证目录
				this.drivingLicense = datail.drivingLicense// 行驶证
				this.drivingLicensePath = datail.drivingLicensePath//  行驶证目录
				this.vehiclePics = datail.vehiclePics// 车辆
				this.vehiclePicsPath = datail.vehiclePicsPath// 车辆照片目录
			}
				// 接收URL中传参的数据
			const query = this.$route.query;
			if(query.c || query.d) {
				setTimeout(() => {
					this.form.setFieldsValue({
						residence: query.c,
						endPlace: query.d
					});
				}, 100);
			}
			// 车辆类型
			this.getCommonDict('carTypeList',5);
		},
		watch: {},

		mounted: function() {

		},
		methods: {

			// 字典表接口 
			getCommonDict (nameList,type) {
				this.loading = true
				this.$get('/info/commonDict', {
					dictType: type,
		            pageSize: 99,
		            pageIndex: 1
				}).then((r) => {
					this.loading = false
		            switch(type){
		              case 5: 
		                this[nameList] = r.data.data.rows; 
		                break;
		            }
				}).catch((e) => {
					this.loading = false;
				})
			},

			close(){
			    this.webShow=false;
				this.userShow=false;
			},
			
			// 上传车辆照片
			vehicle_Change(info){
				if(info.file.status === 'uploading') {
					this.upload1_loading = true
					return
				}
				if(info.file.status === 'done') {
					this.vehicle_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
					this.vehiclePics = info.file.response.data.certificatesjpg// 车辆
					this.vehiclePicsPath = info.file.response.data.certificatesPath// 车辆照片目录
					this.upload1_loading = false
				}
			},
			// 上传行驶证照片
			travel_Change(info){
				if(info.file.status === 'uploading') {
					this.upload2_loading = true
					return
				}
				if(info.file.status === 'done') {
					this.travel_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
					this.drivingLicense = info.file.response.data.certificatesjpg// 行驶证
					this.drivingLicensePath = info.file.response.data.certificatesPath//  行驶证目录
					this.upload2_loading = false
				}
			},
			// 上传运营证照片
			Operate_Change(info){
				if(info.file.status === 'uploading') {
					this.upload3_loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Operate_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
					this.certificatesPics = info.file.response.data.certificatesjpg// 运营证
					this.certificatesPicsPath = info.file.response.data.certificatesPath// 运营证目录
					this.upload3_loading = false
				}
			},
			// 上传前事件
			beforeUpload(file) {
				if(file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/jpg'){
					return true
				}else{
					this.$message.error('请选这正确的jpg.jpeg.png图片格式!')
					return false
				}
			},
			// 认证提交
			handleSubmit(e) {
				if(this.but_loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						this.but_loading = true;
						values.userId = this.user.userId
						values.certificatesPics = this.certificatesPics// 运营证
						values.certificatesPicsPath = this.certificatesPicsPath// 运营证目录
						values.drivingLicense = this.drivingLicense// 行驶证
						values.drivingLicensePath = this.drivingLicensePath//  行驶证目录
						values.vehiclePics = this.vehiclePics// 车辆
						values.vehiclePicsPath = this.vehiclePicsPath// 车辆照片目录
						// 省市县拆分存
						values.departureProvince = values.residence.split('-')[0]
						values.departureCity = values.residence.split('-')[1]
						values.departureArea = values.residence.split('-')[2]
						
						console.log('Received values of form: ', values);
						if (this.type === 'edit') {
							this.editSubmit(values)
						}else{
							this.addSubmit(values)
						}
					}
				});
			},
			// 添加保存数据
			addSubmit(values){
				this.$post('info/infoVehicle', values,true).then((r) => {
					console.log(r,8989)
					if(r.status == 200){
						this.$message.success(r.data.message)
						this.form.resetFields();
						this.vehicle_img = '' 
						this.travel_img = '' 
						this.Operate_img = ''
					}
					this.but_loading = false;
				}).catch((e) => {
					console.log(e)
					this.$message.error(e)
					this.but_loading = false;
				})
			},
			// 编辑修改数据
			editSubmit(values){
				values.vehicleId = this.datail.vehicleId;
				values.approvalStatus = 106;
				this.$put('info/infoVehicle', values,true).then((r) => {
					console.log(r,8989)
					if(r.status == 200){
						this.$message.success(r.data.message)
						this.but_loading = false;
						this.$emit('close');
					}
				}).catch((e) => {
					console.log(e)
					this.but_loading = false;
					this.$message.error(e)
				})
			},
			callback(key) {
				console.log(key)
			},
				/* 省市地图代码 start */
			// 省市地图回调
			mapSvgCall(d) {
				if(d.name === 'departure') {
					this.form.setFieldsValue({
						residence : d.provCityArea
					});
					this.departureData = Object.assign({}, d);
				}
			
				this.getDistanceCount();
			},
			// 起运地
			departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
			},
			// 目的地
			destinationShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
			},
			// 起运地到目的地的距离
			getDistanceCount() {
				if(this.departureData.point && this.destinationData.point) {
					this.$refs.mapSvgDialog.distanceCount(this.departureData.point, this.destinationData.point);
				}
			},
			// 调用距离返回
			distanceCall(num) {
				// this.form.setFieldsValue({ juliNum: num });
			}
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less">

	.car-info {
		.upzjimg{
			.up_img{
				float: left;
				position: relative;
				.ant-upload.ant-upload-select-picture-card{
					width: 216px;
					height: 216px;
				}
				img{
					width: 200px;
					height: 200px;
				}
				.up_img_d{
					width: 200px;
					height: 200px;
					padding-top: 55px; 
				}
				.img_zz{
					width: 216px;
					height: 216px; 
					position: absolute; 
					color: #fff;
					border: 1px solid;
					top:0;
					left: 0;
					.img_zz_text{
						width: 100%;
						text-align: center;
						position: absolute;
						z-index: 10;
						padding-top: 55px; 
					}
					.img_zz_d{
						position: absolute;
						width: 216px ;
						height:216px;
						background: #000;
						opacity:0.6;
					}
				}
			}
		}
	}
</style>